<template>
  <div>
    <el-table :data="classifyList" style="width: 96%" max-height="500px">
      <el-table-column label="#" width="180" type="index"></el-table-column>
      <el-table-column label="类名" >
        <template slot-scope="scope">
          <el-input v-model="input" placeholder="请输入新增类名" v-if="scope.$index == 0" style="width:200px;"></el-input>
          <div v-else @dblclick="dblClickHandle(scope)">
            <el-input v-model="listIpt" v-if="idx == scope.$index" @blur="onBlur(scope)" v-focus></el-input>
            <el-button v-else size="mini">{{scope.row.name}}</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" style="">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleAdd(scope.$index)" v-if="!scope.$index">保存</el-button>
          <template slot-scope="scope" v-else>
            <!-- <el-button
                        size="mini"
            @click="handleEdit(scope.$index)">修改</el-button>-->
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      input: "",
      listIpt: "",
      idx: null
    };
  },
  async mounted() {
    await this.getCid();
  },
  methods: {
    ...mapActions("classify", ["getCid", "addList", "delList", "updateList"]),
    async handleAdd() {
      if (this.input.trim()) {
        await this.addList({
          name: this.input.trim()
        });
        this.input = "";
        this.$message({
          message: "消息提示：新增成功！",
          type: "success"
        });
      } else {
        this.$message({
          message: "消息提示：请输入新增类名！",
          type: "warning"
        });
      }
    },
    handleEdit(row) {},
    dblClickHandle(scope) {
      this.idx = scope.$index;
      this.listIpt = scope.row.name;
    },
    async onBlur(scope) {
      this.idx = null;
      if (this.listIpt == scope.row.name) {
        this.$message({
          message: "消息提示：抱歉，您未作出任何修改！",
          type: "warning"
        });
      } else {
        await this.updateList({
          id: scope.row.id,
          name: this.listIpt
        });
        this.$message({
          type: "success",
          message: "消息提示：修改成功！"
        });
      }
    },
    handleDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await this.delList({
            id
          });
          this.$message({
            type: "success",
            message: "消息提示：删除成功！"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "消息提示：已取消删除！"
          });
        });
    }
  },
  computed: {
    ...mapState("classify", ["classifyList"])
  },
  directives: {
    focus: {
      inserted: function(el) {
        el.childNodes[1].focus();
      }
    }
  }
};
</script>

<style scoped>

</style>